<template>
    <div class="cart page">
        <div class="bg"  v-if="!cartItems||cartItems.length<1">
            <img class="img" src="@/assets/cart.png" alt="">
            <span style="font-size:13px;" class="text">购物车空空如也，快去首页逛逛</span>
            <div @click="turn('/home')" class="buy" style="background-color:#00D6C0;">去逛逛</div>
        </div>

        <div class="con">
            <div class="items" v-if="cartItems">
                <div v-for="(item,index) in cartItems" :key="item.id" :class="['ite',item.shopFlag!=0?'iteTop':'ite']" >
                    <div v-if="item.shopFlag" class='shopName' @click="inShop(item.shopUserId)">
                        <i class="cubeic-home"></i>
                        {{item.shopName||'社集优选自营店'}}
                        <i style="color: #999;" class="cubeic-arrow"></i>
                    </div>
                    <div class="item">
                        <div class="sbt" @click="selectItem(index)">
                            <span v-if="!item.selected" class="cubeic-round-border"></span>
                            <span v-else class="cubeic-right iconColor"></span>
                        </div>
                        <img class="img" :src="imgH+item.img" alt="">
                        <div class="info">
                            <div  class="name">{{item.goodsName}}</div>
                            <div  class="sku-info" >
                                <span>{{item.skuName?item.skuName:'默认'}}</span>
                            </div>
                            <div class="price">¥ <span>{{item.nowPrice?parseInt(item.nowPrice):'0'}}</span>.{{item.nowPrice?item.nowPrice.toFixed(2).split('.')[1]:'00'}}</div>
                            <span class="iconfont iconcha" @click="deleteCart(item.id,index)"></span>
                            <num-input @change="changeCart(index,item.quantity)" class="inp" v-model="item.quantity"></num-input>
                        </div>
                    </div>
                    <div class="item" v-if="item.bind">
                        <div class="dashes"></div>
                        <div class="sbt" @click="selectItem(index)">
                            <span v-if="!item.selected"  class="cubeic-round-border"></span>
                            <span v-else class="cubeic-right iconColor"></span>
                        </div>
                        <img @click="turn('/detail?id='+item.bind.goodsId)"  class="img" :src="imgH+item.bind.img" alt="">
                        <div class="info">
                            <div @click="turn('/detail?id='+item.bind.goodsId)" class="name">{{item.bind.goodsName}}</div>
                            <div @click="turn('/detail?id='+item.bind.goodsId)" class="sku-info" >
                                <span>{{item.bind.skuName?item.bind.skuName:'默认'}}</span>
                            </div>
                            <div class="price">¥ <span>{{item.bind.nowPrice?parseInt(item.bind.nowPrice):'0'}}</span>.{{item.bind.nowPrice?item.bind.nowPrice.toFixed(2).split('.')[1]:'00'}}</div>
                            <!-- <num-input @change="changeCart(index)" class="inp" v-model="item.quantity"></num-input> -->

                            <div class="numinput">
                                <div class="decrease">-</div>
                                <input ref="inp" :disabled="true" class="input" type="number" v-model="item.bind.quantity">
                                <div class="add">+</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <cart-bar v-if="cartItems&&cartItems.length>0" :selected="totalCartInfo[2]" @selectAll="selectAll" :total="totalCartInfo[0]" :desc="totalCartInfo[1]" @commit="commit"></cart-bar>
        </div>
    </div>
    </template>

    <script>
        import numInput from "@/components/base/num-input"
        import cartBar from "@/components/cart-bar"
        import {listCart,addCart,deleteCart} from "@/api/cart";
        import {changeCart,changeAll} from "../../api/cart";
        import {mapActions} from 'vuex'
        import * as Dialog from '@/dialog'
        import {info} from "../../api/user";


        export default {
            activated(){
                info().then(res=>{
                    this.level = res.extra.level
                })

                listCart().then(res=>{
                    let index =1
                    this.cartBindItems=[]
                    res.data.forEach(item=>{
                      this.cartBindItems.push(item)
                        // if (index == 1){
                        //     this.cartBindItems.push(item)
                        //     index++
                        // }else {
                            // let flag = false
                            // this.cartBindItems.forEach(bindItem=>{
                            //     if (bindItem.bindGoodsName == item.goodsName){
                            //         flag = true
                            //         this.$set(bindItem,'bind',item)
                            //     }
                            // })
                            // if (!flag){
                            //     this.cartBindItems.push(item)
                            // }
                        // }
                    })
                    let temp
                    this.cartItems = this.cartBindItems.map(item=>{
                        if (temp!==item.shopId){
                            temp = item.shopId
                            this.$set(item,'shopFlag',1)
                        }else {
                            this.$set(item,'shopFlag',0)
                        }
                        return item
                    })
                })
            },
            watch:{
                cartItems(){
                    let count = 0
                    this.cartItems.forEach(cart=>{
                        count+=cart.quantity
                    })
                    this.updateCartCount(count)
                }
            },
            data(){
                return {
                    imgH:process.env.VUE_APP_IMG_DOMAIN,
                    cartItems:[],
                    cartBindItems:[],
                    level:[]
                }
            },
            methods:{
                turn(path){
                    this.$router.push(path)
                },
                ...mapActions([
                    'updateCartCount'
                ]),
                selectAll(){//全选
                    let selected = this.totalCartInfo[2]
                    changeAll(!selected).then(res=>{
                        this.cartItems.forEach(cart=>{
                            cart.selected = !selected
                            // this.$set(cart,'selected',!selected)

                        })
                    })
                },
                commit(){
                    if(this.selectItemCount>0){
                        this.$router.push({
                            path:"commit"
                        })
                    }
                },
                selectItem(index){
                    let item = this.cartItems[index]
                    let bindId = null
                    if (item.bind){
                        bindId = item.bind.id
                    }
                    changeCart(item.id,item.quantity,!item.selected,bindId).then(res=>{
                        item.selected = !item.selected
                    })
                },
                deleteCart(id,index){
                    let cartItem = this.cartItems[index];
                    let bindId = null
                    if (cartItem.bind){
                        bindId = cartItem.bind.id
                    }
                    //删除
                    deleteCart(id,bindId).then(res=>{
                        this.cartItems.splice(index,1)
                        let temp
                        this.cartItems = this.cartItems.map(item=>{
                            if (temp!==item.shopId){
                                temp = item.shopId
                                this.$set(item,'shopFlag',1)
                            }else {
                                this.$set(item,'shopFlag',0)
                            }
                            return item
                        })
                    })

                },
                changeCart(index,quantity){
                    let item = this.cartItems[index]
                    let bindId = null
                    // if (item.bind){
                    //     bindId = item.bind.id
                    //     if (item.quantity % item.firstQuantity == 0){
                    //         item.bind.quantity = item.quantity / item.firstQuantity * item.bindQuantity
                    //     }
                    // }

                    // //弹幕
                    // if(item.bindGoodsName && !item.bind && quantity>=item.bind.quantity ){
                    //     setTimeout(()=>{
                    //         if(!item.level) return
                    //         if(item.level.indexOf(this.level.name) < 0){
                    //             this.$createDialog({
                    //                 type: 'alert',
                    //                 title: '',
                    //                 content: '该订单数量已达到获得赠品的条件!<br/>请从商品详情页的推荐套餐->点击购买此套餐加入购物车！'
                    //             }).show()
                    //
                    //         }else{
                    //             this.$createDialog({
                    //                 type: 'alert',
                    //                 title: '',
                    //                 content: '该订单数量已达到获得赠品的条件!<br/>请联系上级下单！'
                    //             }).show()
                    //         }
                    //     },100)
                    // }


                    if(item.quantity>0){
                        changeCart(item.id,item.quantity,item.selected,bindId).then(res=>{
                            //触发监听
                            this.cartItems = this.cartItems.concat([])
                        })
                    }else {
                        //删除
                        deleteCart(item.id,bindId).then(res=>{
                            this.cartItems.splice(index,1)
                            let temp
                            this.cartItems = this.cartItems.map(item=>{
                                if (temp!==item.shopId){
                                    temp = item.shopId
                                    this.$set(item,'shopFlag',1)
                                }else {
                                    this.$set(item,'shopFlag',0)
                                }
                                return item
                            })
                        })

                    }

                },
                inShop(id){
                    let uId = id
                    if (!uId){
                        uId = 0
                    }
                    this.$router.push({
                        path:`shop/list?uid=${uId}`
                    })
                }
            },
            computed:{
                selectItemCount(){
                    let count = 0
                    this.cartItems.forEach(cart=>{
                        if(cart.selected){
                            count++
                        }
                    })
                    return count
                },
            totalCartInfo(){//总购物车信息计算  总价格 总优惠 是否是全选
                let totaNowPrice = 0
                let totaOldPrice = 0
                let selectAll = true
                this.cartItems.forEach(cart=>{
                    if(!cart.selected){
                        selectAll = false
                        return;
                    }
                    totaNowPrice+=cart.nowPrice*cart.quantity
                    totaOldPrice+=cart.oldPrice*cart.quantity
                    if (cart.bind != null){
                        totaNowPrice+=cart.bind.nowPrice*cart.bind.quantity
                        totaOldPrice+=cart.bind.oldPrice*cart.bind.quantity
                    }
                })
                return [totaNowPrice.toFixed(2),(totaOldPrice-totaNowPrice).toFixed(2),selectAll]
            }

        },
        components:{
            numInput,cartBar
        }
    }
</script>

<style scoped lang="stylus">



    .cart
        z-index 1
        height 100%
        background url("~@/assets/helfcirindex.png") no-repeat
        background-size 100% auto
        .bg
            position absolute
            top 0
            bottom 0
            left 0
            right 0
            display flex
            flex-direction column
            align-items center
            justify-content center
            .img
                display inline-block
                width 10rem
                height 250px
            .text
                display inline-block
                font-weight 500
                color #C8C8C8
                margin-top -20px
            .buy
                margin-top 2rem
                width 150px
                height 34px
                background rgba(240,200,8,1)
                border-radius 17px
                font-size 15px
                font-family PingFang SC
                font-weight 400
                color rgba(255,255,255,1)
                line-height 34px
                text-align center
        .con
            padding-top 30px
            padding-bottom 44px
            .items
                padding 0 10px
                padding-bottom 50px
                .ite
                    background-color #ffffff
                    overflow: hidden;
                .iteTop
                    border-radius: 5px 5px 0 0;
                    margin-top 10px
                .shopName
                    color #4E3D07
                    height 25px
                    padding-left 10px
                    line-height 25px
                    font-size 15px
                    margin 10px 0
                    background-color white
                .item
                    background-color white
                    padding 0 20px 22px 0
                    border-color $border-split-color
                    display flex
                    align-items center
                    position relative
                    .dashes
                        height 92px
                        position absolute
                        left 17px
                        bottom 78px
                        border-left 1px dashed #ccc
                    .sbt
                        flex  0 0 36px
                        display flex
                        align-items center
                        font-size 22px
                        justify-content center
                        .iconColor
                            color #00D6C0
                    .img
                        border-radius 5px
                        width 90px
                        height 90px
                        flex 0 0 90px
                    .info
                        overflow hidden
                        position relative
                        flex 1
                        padding 0px 0 0px 12px
                        .name
                            color #4E3D07
                            width: 5rem
                            font-size 14px
                            font-weight 300
                            line-height 14px
                            margin-top 3px
                            white-space nowrap
                            text-overflow: -o-ellipsis-lastline;
                            text-overflow: ellipsis;
                            overflow hidden
                        .sku-info
                            width fit-content
                            width 100%
                            font-size 11px
                            line-height 11px
                            padding 20px 0
                            span
                                background-color #FBFAFA
                                color $font-color-light
                                padding 5px
                        .price
                            color #00D6C0
                            font-size 12px
                            font-weight 500
                            span
                                font-size 16px
                        .numinput
                            position absolute
                            right 0
                            bottom  1px
                            display flex
                            align-items center
                            width 90px
                            height 24px
                            .input
                                -webkit-appearance: none ;
                                -webkit-user-select: text
                                height 100%
                                outline none
                                font-size 13px
                                text-align center
                                color #4E3D07
                                width 50%
                                background-color #F4F3F3
                                border 1px solid #ebebeb
                            .add, .decrease
                                width 25%
                                font-size 13px
                                color $font-color-light
                                border 1px solid rgba(161,161,161,0.7);
                                height 100%
                                display flex
                                align-items center
                                justify-content center
                                text-align center
                                border 1px solid #ebebeb
                            .decrease
                                border-right 0
                            .add
                                border-left 0
                        .iconcha
                            position absolute
                            right 0
                            top 0
                            color #B1B1B1
                            font-size 11px
                        .inp
                            position absolute
                            right 0
                            bottom  1px

            /deep/.buy-btn
                background-color:#00D6C0!important


</style>
